.sky1 {
  margin-left: 35px;
  width: 112px;
  height: 46px;
  border-radius: 23px;
  background: linear-gradient(269deg, rgba(115,122,255, 0.6), rgba(251,251,255, 0.6));
  box-shadow: 5px 9px 5px 0px rgba(0, 0, 0, 0.42) inset;

  &.press{
    background: linear-gradient(269deg, rgba(115,122,255, 1), rgba(251,251,255, 1));
    box-shadow: -5px -9px 10px 0px rgba(120, 120, 120, 0.42);
  }
}

.sky2 {
  width: 112px;
  height: 46px;
  border-radius: 23px;
  background: linear-gradient(90deg, rgba(166, 103, 255, 0.6), rgba(115, 120, 255, 0.6));
  box-shadow: 5px 9px 5px 0px rgba(0, 0, 0, 0.42)  inset;

  &.press{
    background: linear-gradient(90deg, rgba(166, 103, 255, 1), rgba(115, 120, 255,1));
    box-shadow: -8px -9px 10px 0px rgba(120, 120, 120, 0.42);
  }
}

.sky3 {
  width: 112px;
  height: 46px;
  border-radius: 23px;
  background: linear-gradient(269deg, rgba(86, 236, 254, 0.6), rgba(253, 142, 50, 0.6));
  box-shadow: 5px 9px 5px 0px rgba(0, 0, 0, 0.42) inset;

  &.press{
    background: linear-gradient(269deg, rgba(86, 236, 254, 1), rgba(253, 142, 50, 1));
    box-shadow: -8px -9px 10px 0px rgba(120, 120, 120, 0.42);
  }
}
